<template>
	<view class="">
		<gameBasics />

		<view class="bossCard">
			<view class="team_information">
				<image :src="gameChall[0].teamList.pic" mode="aspectFill"></image>
				<text>{{gameChall[0].teamList.title}}</text>
			</view>
			<view class="topic" v-if="gameChall[0].time==0">
				题目：？
			</view>
			<block v-else-if="!code">
				<view class="time" v-if="index">
					<flipcountdown propsType="2" :endTime="endTime" :autoplay="autoplay" value="00:00:00" />
				</view>
				<image v-else class="theme" :src="quest.pic" mode="heightFix"></image>
<!-- 				<view class="topic" v-else>
					{{quest.title}}
				</view> -->
				<view
					style="font-size: calc(60vmin / 7.5);font-weight: 700;color: #333;text-align: center;display: flex;justify-content: space-between;align-items: center;padding: 0 calc(60vmin / 7.5);width: calc(100vw - calc(120vmin / 7.5));">
					<text style="width: calc(170vmin / 7.5);"></text>
					<text v-if="index">第{{index+1}}人挑战中</text>

					<!-- <text class="date">0{{time}}s</text> -->
					<view class=""
						style="display: flex;align-items: center;font-size: calc(28vmin / 7.5);font-weight: 100;"
						v-if="!index">
						倒计时：
						<flipcountdown propsType="2" :endTime="endTime" :autoplay="autoplay" value="00:00:00"
							zoom=".5" />
					</view>

				</view>
			</block>


			
			
			<view class="" style="height: calc(120vmin / 7.5);display: flex;line-height: calc(120vmin / 7.5);text-align: center;">
				<view class="game_btn" :style="{opacity:userPeople.power?1:0}" v-if="userPeople.power&&(gameChall[0].time==0||code)" @click="setAutoplay">
					<view class="">
					</view>
					{{gameChall[0].time==0?'开始挑战':awaitShow?'等待确认':'回答完毕'}}
				</view>
				
				<view v-else style="font-size: calc(28vmin / 7.5);color: #333333;margin: auto;">
					{{autoplay?`${gameChall[0].teamList.title} 正在进行游戏`:`等待 ${gameChall[0].teamList.title} 队长开始`}}			
				</view>
			</view>
		</view>

		<u-modal :show="answerShow" title="挑战结果" content='请选择是否挑战成功' showCancelButton cancelText="失败" confirmText="成功"
			@confirm="submit(1)" @cancel="submit(0)">
		</u-modal>
		<u-popup :show="resultShow" @close="close" mode="center" round="calc(20vmin / 7.5)">
			<view class="popup">
				<image class="bg" src="/static/game/porpCardImg.png" mode="aspectFill"></image>


				<view class="answerText">
					请准备
				</view>
				<view class="time">
					{{date}}s
				</view>
			</view>
		</u-popup>
		<gameLoading/>
	</view>
</template>

<script>	
	let demo = null
	let time=null
	import flipcountdown from '@/components/flipcountdown/flipcountdown.vue'
	export default {
		components: {
			flipcountdown
		},
		data() {
			return {
				autoplay: false,
				resultShow: false,
				answerShow: false,
				awaitShow: false,
				gameData: {},
				gameChall: {},
				teamList: [],
				game_config: {},
				userPeople: {},
				quest: {},
				endTime: 0,
				type: 0,
				time: 9,
				date: 3,
				index: 0,
				code: false, //是否结束，回答环节
				acceptStatus:true
			}
		},
		onShow() {
			this.userData = uni.getStorageSync("userData")
		},
		onUnload() {
			this.acceptStatus=false
			// uni.$off('onMessage') 
		},
		watch: {
			endTime() {
				this.autoplay = false
				// uni.showToast({
				// 	title: '开始计时',
				// 	icon: 'none'
				// });
				setTimeout(() => {
					this.autoplay = true
				}, 500)
return;
				if (!demo) {

					demo = 1
					setTimeout(() => {
						this.autoplay = true
					}, 500)
				} else {
					this.autoplay = true
					
					this.resultShow = true
					this.date = 3

					var time_ = setInterval(() => {
						this.date--
						if (this.date <= 0) {

							this.resultShow = false
	              this.autoplay = true
							clearInterval(time_)
							// uni.showToast({
							// 	title: '开始计时',
							// 	icon: 'none'
							// });
						}
					}, 1000)
				}

			},
		},
		mounted() {
			uni.$on('onMessage',(res)=>{
				if(!this.acceptStatus) return;
					this.$nextTick(()=>{
						this.$store.commit('switchGame', {
							code: false
						})
					})
					if(res.data.code!=202) return;
				this.game_config = res.data.game_config
				this.type = this.game_config.type
				this.gameChall = res.data.game_chall
				this.gameData = res.data.game
				this.teamList = res.data.team
				this.quest = res.data.quest_list
				this.userPeople = res.data.userPeople
				if(time){
					clearInterval(time)
					time=null
				} 
				if(!this.gameChall.length) return;
	      time=setInterval(()=>{
					if (this.gameChall[0].time == 0) return this.index = 0;
					this.code = false
					if (this.index >= this.gameChall[0].teamList.people.length) return this.code = true
					if (this.gameChall[0].result_confirm) this.awaitShow = this.gameChall[0].result_confirm.every(
						item => item.count == 1);
					
					let timestamp = Date.parse(new Date()) / 1000;
					// ((this.index + 1) * 3)
					let gap = 0
					let num = timestamp - this.gameChall[0].time - gap
					console.log('heih',num)
					if (num < 30) {
						this.index = 0
						this.endTime = this.gameChall[0].time - 0 + 30 + gap
					} else {
						this.index = ~~(((num - 30) / this.game_config.time_s) + 1)
						console.log(this.index)
						this.endTime = this.gameChall[0].time - 0 + 30 + (this.index * this.game_config.time_s) +
							gap
					}
				},1000)			
			})
			let game_id = uni.getStorageSync("gameId")
			let userData = uni.getStorageSync("userData")			
			this.$ws.socketTask.send({
				data: JSON.stringify({
				game_id,
				user_id: userData.id
			}),
				async success() {
					console.log("消息发送成功")
				}
			});
		},
		methods: {
			setAutoplay() {
				if (!this.userPeople.power) return;
				if (this.gameChall[0].time != 0) return this.answerShow = true
				let data = {
					game_id: this.gameData.id,
					activ_id: this.game_config.activ_id,
					team_id: this.userPeople.teamId
				}
				this.$myRuquestWs('home/game/team_go', data).then(res => {
					this.$myRuquestWs('home/game/activ_quest', data).then(res => {

					})
				})

			},
			submit(code) {
				let data = {
					game_id: this.gameData.id,
					activ_id: this.game_config.activ_id,
					team_id: this.userPeople.teamId,
					number: code
				}
				this.$myRuquestWs('home/game/game_end', data).then(res => {
					this.answerShow = false

				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.game_btn {
		padding: 0 calc(70vmin / 7.5);
	}

	.bossCard {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: calc(60vmin / 7.5) 0;
		height: calc(100vh - calc(120vmin / 7.5));

		.time {
			display: flex;
			justify-content: center;
			transform: scale(1.2);

			view {
				// transform: scale(1.1);
			}
		}
	}

	.team_information {
		display: flex;
		justify-content: center;
		margin-bottom: calc(20vmin / 7.5);

		image {
			width: calc(90vmin / 7.5);
			height: calc(90vmin / 7.5);
			margin-right: calc(20vmin / 7.5);
		}

		font-size: calc(50vmin / 7.5);
		color: #333333;
		font-weight: 700;
	}

	.topic {
		font-size: calc(160vmin / 7.5);
		font-weight: 700;
		text-align: center;
	}

	.date {
		background-color: rgba(0, 0, 0, .23);
		color: #fff;
		width: calc(170vmin / 7.5);
		height: calc(70vmin / 7.5);
		line-height: calc(70vmin / 7.5);
		border-radius: calc(35vmin / 7.5);
		text-align: center;
		font-size: calc(32vmin / 7.5);
		float: right;
	}


	.popup{
		position: relative;
		width: calc(624vmin / 7.5);
		height: calc(484vmin / 7.5);

		.time {
			position: absolute;
			bottom: calc(0vmin / 7.5);
			right: calc(20vmin / 7.5);
			width: calc(60vmin / 7.5);
			height: calc(60vmin / 7.5);
			text-align: center;
			line-height: calc(60vmin / 7.5);
			color: #fff;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, .23);
		}

		.answerText {
			color: #F9CF72;
			font-size: calc(60vmin / 7.5);
			text-align: center;
			position: absolute;
			bottom: calc(100vmin / 7.5);
			left: 50%;
			transform: translateX(-50%);
			font-weight: 700;
			width: 100%;
		}

		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}
	.theme {
		flex: 1;
		background-color: #fff;
		height: calc(580vmin / 7.5);

		margin: auto;

		// margin-right:  calc(60vmin / 7.5);
	}
</style>
